Frontend Forever App
We have a mobile app for you to download and use. And you can unlock many features in the app.
Get it now
Intall Later
Run
HTML
CSS
Javascript
Output
@import url(https://fonts.googleapis.com/css?family=Sigmar+One); /* pokemone pictures */ .pokemon { width: 200px; height: 200px; /* center content using flex box */ display: flex; justify-content: center; align-items: center; /* overlay */ box-shadow: 0 0 0 100px inset, 0 0 5px grey; /* hover out transition */ transition: box-shadow 1s; float: left; margin: 10px; } /* pokemone names */ .pokemon::after { width: 80%; height: 80%; display: block; white-space: pre; font: 15pt 'sigmar one'; color: white; border: 2px solid; text-align: center; /* center content using flex box */ display: flex; justify-content: center; align-items: center; /* hover out transition */ transition: opacity 1s .5s; } /* reveal pokemone picture on hover */ .pokemon:hover { box-shadow: 0 0 0 5px inset, 0 0 5px grey, 0 0 10px grey inset; transition: box-shadow 1s; } /* hide pokemone name on hover */ .pokemon:hover::after { opacity: 0; transition: opacity .5s; } #bulbasaur { background-image: url(http://vignette4.wikia.nocookie.net/pokemon/images/2/21/001Bulbasaur.png/revision/latest/scale-to-width-down/200?cb=20140328190757); color: rgba(71, 121, 94, .9); } #bulbasaur::after { content: 'Bulbasaur'; } #charmander { background-image: url(http://vignette2.wikia.nocookie.net/pokemon/images/7/73/004Charmander.png/revision/latest/scale-to-width-down/200?cb=20140724195345); color: rgba(221, 86, 63, .9); } #charmander::after { content: 'Charmander' } #squirtle { background-image: url(http://vignette2.wikia.nocookie.net/pokemon/images/3/39/007Squirtle.png/revision/latest/scale-to-width-down/200?cb=20140328191525); color: rgba(65, 102, 114, .9); } #squirtle::after { content: 'Squirtle' } #pikachu { background-image: url(http://vignette2.wikia.nocookie.net/pokemon/images/0/0d/025Pikachu.png/revision/latest/scale-to-width-down/200?cb=20140328192412); color: rgba(179, 152, 98, .9); } #pikachu::after { content: 'Pikachu' } #wrapper { width: 500px; height: 500px; margin: auto; }